<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 设置头部信息 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="智能S21-2班雒郝名">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折线图，柱状图</title>
    <script src="admin/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="admin/css/jquery.stepy.css">
    <link rel="stylesheet" href="admin/css/bootstrap.min.css">
    <style>
        body {
            overflow-x: hidden;
            overflow-y: scroll;
        }

        table {
            border-collapse: collapse;
            border: 1px solid #ccc;
            width: 100%;
            margin: 0 auto;
            text-align: center;
            overflow: auto;
        }

        th {
            background-color: rgb(153, 151, 151);
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        td {
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .btn {
            margin-left: 5px;
        }
    </style>
</head>
<!-- echarts图标实现案例1 -->
<body>
<div class="wrapper">
    <!-- 表格部分 -->
    <table border="1" id="commodity" style="border-collapse:collapse;text-align: center;align-items: center;">
        <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>普通价格</th>
            <th>VIP价格</th>
            <th>库存</th>
            <th>操作</th>
        </tr>
    </table>
    <script>
        function xiugai() {
            alert("该功能正在开发中，敬请期待…");

        }

        function shanchu() {
            alert("该功能正在开发中，敬请期待…");

        }

        fetch("http://localhost:8090/datas1").then(res => res.json()).then(json => {
            for (var i = 0; i < json.adatas.length; i++) {
                var tr = document.createElement("tr");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                var td4 = document.createElement("td");
                var td6 = document.createElement("td");
                var td7 = document.createElement("td");
                td1.innerText = json.adatas[i];
                td2.innerText = json.bdatas[i];
                td3.innerText = json.cdatas[i]
                td4.innerText = json.ddatas[i]
                td6.innerText = json.fdatas[i]
                td7.innerHTML = '<button id="btn1" class="btn btn-danger" onclick="xiugai()">修改</button><button id="btn2" onclick="shanchu()" class="btn btn-danger">删除</button>';
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
                tr.appendChild(td6);
                tr.appendChild(td7);
                document.getElementById("commodity").appendChild(tr);
            }
            var table = document.getElementById("commodity");
            var tr = table.getElementsByTagName("tr");
            for (var i = 1; i < tr.length; i++) {
                tr[i].style.backgroundColor = "skyblue";
                tr[i].onmouseover = function () {
                    this.style.backgroundColor = "#c1e0ff";
                }
                tr[i].onmouseout = function () {
                    this.style.backgroundColor = "#redyellow";
                }
            }

            //给btn1添加弹窗事件


        })


    </script>
    <!-- 图表部分 -->
    <div class="row" style="padding-top: 40px;">
        <div class="col-md-6">
            <!-- 为Echarts定义一个容器 -->
            <div id="main" style="width: 600px;height:400px;"></div>

        </div>
        <div class="col-md-6">
            <!-- 为Echarts定义一个容器 -->
            <div id="main2" style="width: 600px;height: 400px;">
            </div>
        </div>
        <!-- <script src="js/dashboard-chart-init.js"></script> -->
        <!-- 引入Echarts文件 -->
        <script src="js/echarts.js"></script>


        <!-- Echarts使用流程
1.导入插件：导入echarts.js，注意相对路径是否正确
2.创建容器：创建一个容纳echarts图表的容器，一般为div
3.创建echarts实例：创建一个变量，并为调用echarts.init方法为它赋值，传入容器
4.配置echarts非data属性：设置echarts图表类型等参数
5.异步获取echart图标中的数据点集合
5.1
-->
        <script>


            // 3.创建echart实例，传入容器
            var myChart = echarts.init(document.getElementById("main"))
            // 4.配置echarts非data属性
            var option
            option = {
                title: {
                    text: '普通用户购买商品价格图表',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['价格']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    name: '商品名称',
                    type: 'category',
                    data: [],
                    axisLabel: {
                        inside: true,
                        color: '#fff'
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#999'
                    }
                },
                name: '价格',
                type: 'value',
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#54FF9F'},
                                {offset: 0.5, color: '#00FFFF'},
                                {offset: 1, color: '#BBFFFF'}
                            ])
                        },

                        data: []
                    }
                ]
            };


            var myChart2 = echarts.init(document.getElementById("main2"))
            var option2
            option2 = {
                title: {
                    text: '普通,VIP用户购买商品价格对比图',
                    align: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['普通用户', 'VIP用户'],
                    backgroundColor: ['#FF0000', '#00FF00']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '普通用户',
                        data: [],
                        type: 'line',
                        smooth: true
                    },
                    {
                        name: 'VIP用户',
                        data: [],
                        type: 'line',
                        smooth: true,
                        color: '#ff0000'
                    }
                ]
            };
            myChart.setOption(option);
            // myChart2.setOption(option);
            // 5.异步获取echart图标中的数据点集合
            fetch('/datas1').then(res => res.json().then(res => {
                myChart.setOption({
                    xAxis: {
                        data: res.bdatas
                    },
                    series: [
                        {
                            name: '价格',
                            data: res.cdatas,
                        }
                    ]
                });
                myChart2.setOption(option2);
                myChart2.setOption({
                    xAxis: {
                        data: res.bdatas
                    },
                    series: [
                        {
                            name: '普通价格',
                            data: res.cdatas,
                        },
                        {
                            name: 'Vip价格',
                            data: res.ddatas,
                        }
                    ]
                });
            }))

        </script>
        <script>
            // 获取到表格的数据,分别给奇数行的表格和偶数行的表格填充不同的颜色
            function getTableData() {
                var tableData = [];
                var table = document.getElementById("table");
                var trs = table.getElementsByTagName("tr");
                for (var i = 0; i < trs.length; i++) {
                    var tr = trs[i];
                    var tds = tr.getElementsByTagName("td");
                    var trData = [];
                    for (var j = 0; j < tds.length; j++) {
                        var td = tds[j];
                        trData.push(td.innerHTML);
                    }
                    tableData.push(trData);
                }
                return tableData;
            }

            // 分别给奇数行的表格和偶数行的表格填充不同的颜色
            function setTableColor() {
                var tableData = getTableData();
                var table = document.getElementById("table");
                var trs = table.getElementsByTagName("tr");
                for (var i = 0; i < trs.length; i++) {
                    var tr = trs[i];
                    if (i % 2 === 0) {
                        tr.style.backgroundColor = "rgb(153, 151, 151)";
                    } else {
                        tr.style.backgroundColor = "rgb(204, 204, 204)";
                    }
                }
            }
        </script>

</body>

</html>